<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px; position:relative}
.hide{display:none}
button{width:50px;}
ul{list-style:none}
img{border:0 none;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*slide*/
#slide1{ margin:0 35px 5px 55px; overflow:hidden; width:365px; position:relative;}
#slide1 ul{height:65px; position:relative; width:2000em}
#slide1 li{width:365px; float:left; background:#fff;}
#slide1 .pic{ padding:2px; border:1px solid #ccc; float:left}
#slide1 .info{ margin-left:73px;}
#slide1 .info p{ color:#666; padding-bottom:5px;}
#l1{ position:absolute; top:100px; left:10px;width:22px; height:39px; background:url(img/ranking.png) -2px -58px;}
#r1{ position:absolute; top:100px; left:440px;width:22px; height:39px; background:url(img/ranking.png) -2px -14px;}
#l1:hover{background-position:-35px -58px;}
#r1:hover{background-position:-35px -14px;}
/*.ad .disable_l{background-position:-104px -58px!important;}
.ad .disable_r{background-position:-104px -14px!important;}*/

.add{ width:113px; margin-left:5px; padding-top:10px; height:420px; background:#ededed; position:relative;}
.add #l2{top:-10px;}
.add #l2,.add #r2{ width:113px; height:12px; background:url(img/btn.png) no-repeat left top; position:absolute; left:0; font-size:0; line-height:0}
.add #l2:hover{ background-position:0 -14px;}
.add #r2{ background-position:0 -29px; bottom:-10px}
.add #r2:hover{background-position:0 -43px;}
.add ul{ display:block; height:408px; margin-left:3px; overflow:hidden; position:relative}
.add ul li{ display:block; zoom:1; margin-top:9px; background:#EDEDED}

.add ul a.pic{ background:#fff;padding:2px; border:1px solid #ddd; width:100px; height:100px; display:block; zoom:1; outline:0}
.add ul p{ color:#076fb9; line-height:18px;}

.add ul img{ vertical-align:bottom}
.add ul p{ text-align:center; line-height:18px; padding:1px 0 2px 0; width:106px; overflow:hidden;}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/Slide-min.js"></script>
</head>

<body>
<div class="effect clearfix">
	<h1 style="background:#fff">&nbsp;</h1>
    <pre>调用方法：new Slide ("slide1", "li", "l1", "r1", {count:1, index:"random", dir:"Left", loop:true});
    </pre>
	<div class="ad">
		<a href="###" id="l1"></a>
		<div id="slide1">
			<ul class="clearfix">
				<li>
					<div class="pic"><img src="img/pic1.jpg" width="58" height="59"/></div>
					<div class="info">
						<p><a href="#" hidefocus="true">三人其歌唱111</a></p>
						<p class="text">三个人的歌声，三个人的心声，带动全世界的三人组合神奇的人物，美妙的歌</p>
					</div>
				</li>
				<li>
					<div class="pic"><img src="img/pic1.jpg" width="58" height="59"/></div>
					<div class="info">
						<p><a href="#" hidefocus="true">三人其歌唱222</a></p>
						<p class="text">三个人的歌声，三个人的心声，带动全世界的三人组合神奇的人物，美妙的歌</p>
					</div>
				</li>
				<li>
					<div class="pic"><img src="img/pic1.jpg" width="58" height="59"/></div>
					<div class="info">
						<p><a href="#" hidefocus="true">三人其歌唱333</a></p>
						<p class="text">三个人的歌声，三个人的心声，带动全世界的三人组合神奇的人物，美妙的歌</p>
					</div>
				</li>
			</ul>
		</div>
		<a href="###" id="r1"></a>
		<button onclick="s1.reset()">Reset</button>
	</div>
	
	<pre style=" margin-top:40px;">调用方法：new Slide ("slide2", "li", "l2", "r2", {count:3, dir:"Top", fadeIn:false});
		</pre>
	<div class="add">
    	<a href="###" id="l2"></a>
        <ul id="slide2">
        	<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨1</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨1</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨1</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨2</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨2</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨2</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨3</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨3</p>
			</li>
			<li><a class="pic" href="#"><img src="img/bg_img.gif" width="100" height="100"/></a>
				<p>姚晨3</p>
			</li>
        </ul>
        <a href="###" id="r2"></a>
    </div>
	<br>
	<button onclick="s2.reset()">Reset</button>
</div>
</body>
<script>
window.onload = function(){
	s1 = new Slide ("slide1", "li", "l1", "r1", {count:1, index:"random", dir:"Left", loop:true});
	s2 = new Slide ("slide2", "li", "l2", "r2", {count:3, dir:"Top", fadeIn:false});
}
</script>
</body>
</html>
